<template>
    <div class="main-content">
        <levelbar></levelbar>
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="formInline" ref="formInline" label-width="70px">
                     <el-row :gutter="41">
                         <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="formInline.provinceId" :nochose="true"
                                :name.sync="formInline.provinceName"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="formInline.cityId" :province="formInline.provinceId" 
                                :name.sync="formInline.cityName"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="formInline.areaId" :city="formInline.cityId"
                                 :name.sync="formInline.areaName"></region>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                           <el-form-item label="学校">
                                 <school v-model="formInline.school" style="width:100%"  :provinceId="formInline.provinceId" :cityId="formInline.cityId" :areaId="formInline.areaId" 
                                 @change='schoolChange'></school>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="学校类型">
                                <el-select v-model="formInline.schoolType"
                                 placeholder="请选择学校类型"
                                style="width:100%">
                                    <el-option v-for="(item,index) in schoolTypeArr" 
                                    :key="index" :label="item.schoolTypeName" :value="item.schoolType"> 
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="7">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
             <div slot="table">
                <div class="table-title">
                     <span class="table-title-span">
                        <exportExcel @ee="exportFile"></exportExcel>
                    </span>
                </div> 
                 <!-- :empty-text="emptyText"  -->
                <el-table border style="width: 100%" :data="AnnounceList" v-loading="loading"  @sort-change="sortChange">
                    <el-table-column align="center" label="学校名称">
                        <template scope="scope">
                            <span>{{ scope.row.schoolName | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="学校类型">
                        <template scope="scope">
                            <span>{{ scope.row.schoolTypeName | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" sortable="custom" label="班级数量" prop="classCount">
                        <template scope="scope">
                            <span>{{ scope.row.classCount | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" sortable="custom" label="教师人数" prop="teacherCount">
                        <template scope="scope">
                            <span>{{ scope.row.teacherCount| isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" sortable="custom" label="家长人数" prop="parentCount">
                        <template scope="scope">
                            <span>{{ scope.row.parentCount| isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" sortable="custom" label="学生人数" prop="studentCount">
                        <template scope="scope">
                            <span>{{ scope.row.studentCount | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="区域" prop="s_area_name">
                        <template scope="scope">
                            <span>{{ scope.row.areaName | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="城市" prop="s_city_name">
                        <template scope="scope">
                            <span>{{ scope.row.cityName | isNull }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="省份" prop="s_province_name">
                        <template scope="scope">
                            <span>{{ scope.row.provinceName | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="统计日期" prop="report_date">
                        <template scope="scope">
                            <span>{{ scope.row.countTime | isNull }}</span>
                        </template>
                    </el-table-column>
               </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" 
                :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
             </div>
        </echartsLayout>
    </div>
</template>

<script>
import school from 'components/SchoolClasss/school';
import Levelbar from '../../layout/Levelbar';
import { mapState, mapActions, mapGetters } from 'vuex';
import echartsLayout from 'components/TableLayout/echartsLayout'; 
import trendChart from 'components/Charts/trendChart';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import moment from 'moment';
import {schoolTypeNames, schoolUserList} from 'api/pingtaifenxi';
import exportExcel from 'components/ExportExcel/index'; 
export default{
    components: { exportExcel, province, city, region, echartsLayout, Levelbar, trendChart, school},
    data() {
        return {
            formState: false,
            dataListState: true,
            eCharts1State: false,
            eCharts2State: true,
            eCharts3State: true,
            chartsListState: true,
            tableState: false,
            formInline: {
                provinceId: '07923a0c-8309-4785-b4a5-96f4816ccc5f',
                cityId: '',
                areaId: '',
                school: '', // 学校
                schoolType: '', // 学校类型
                provinceName: '',
                cityName: '',
                areaName: '',
                schoolName: '',
                schoolId: ''
            },
            classCountStatus: '',
            teacherCountStatus: '1',
            parentCountStatus: '',
            studentCountStatus: '',
            loading: true,
            AnnounceList: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            schoolTypeArr: []
        }
    },
    computed: {
        emptyText() {
            return this.listQuery.page == 1 ? '暂无数据' : '为保障流畅性，暂展示一万条数据，您可查询所需信息';
        },
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    created() {
        this.getSchoolType();
        this.searchFetchData();
    },
    methods: {
            // 全局获取行数
        ...mapActions(['ChangePageSize']),
        schoolChange(val) {
            this.formInline.schoolId = val;
        },
        getSchoolType() {
            schoolTypeNames().then(res => {
                this.schoolTypeArr=res.data.content;
                this.schoolTypeArr.unshift({schoolType: '', schoolTypeName: '请选择'})
            })
        },
          
        submit() {
            this.listQuery.page=1;
            this.searchFetchData();
        },
        searchFetchData() {
            this.loading = true;
            let curPage = this.listQuery.page;
            let pageSize = this.config.pageSize;
            let schoolId = this.formInline.schoolId;
            let provinceId = this.formInline.provinceId;
            let cityId = this.formInline.cityId;
            let areaId = this.formInline.areaId;
            let schoolType= this.formInline.schoolType;
            let classCountStatus= this.classCountStatus;
            let teacherCountStatus= this.teacherCountStatus;
            let parentCountStatus= this.parentCountStatus;
            let studentCountStatus= this.studentCountStatus;
            schoolUserList(curPage, pageSize, provinceId, cityId, areaId, schoolType, classCountStatus, teacherCountStatus, parentCountStatus, studentCountStatus, schoolId).then(res => {
                this.loading = false;
                if (res.data.content.list) {
                    res.data.content.list.forEach(val => {
                        val.countTime= moment(val.countTime).format('YYYY-MM-DD'); 
                    })
                }
                this.AnnounceList = res.data.content.list?res.data.content.list:0;
                this.listQuery.total = res.data.content.pagination?res.data.content.pagination.total:0;
            }).catch(() => {
                this.loading = false;
            });
        },
        exportFile() {
            let schoolId = this.formInline.schoolId;
            let provinceId = this.formInline.provinceId;
            let cityId = this.formInline.cityId;
            let areaId = this.formInline.areaId;
            let schoolType= this.formInline.schoolType;
            let classCountStatus= this.classCountStatus;
            let teacherCountStatus= this.teacherCountStatus;
            let parentCountStatus= this.parentCountStatus;
            let studentCountStatus= this.studentCountStatus;
            window.location.href = `${LOCAL_API.scy}/report/user/outExcelBySchoolUser?schoolId=${schoolId}&provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&schoolType=${schoolType}&classCountStatus=${classCountStatus}&teacherCountStatus=${teacherCountStatus}&parentCountStatus=${parentCountStatus}&studentCountStatus=${studentCountStatus}`

            // outExcelBySchoolUser(schoolId,provinceId,cityId,areaId,schoolType,classCountStatus,teacherCountStatus,parentCountStatus,studentCountStatus).then(res=>{

            // })
        },
               // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        sortChange({ column, prop, order }) {
            this.classCountStatus=prop=='classCount'?order=='ascending'?'0':'1':'';
            this.teacherCountStatus=prop=='teacherCount'?order=='ascending'?'0':'1':'';
            this.parentCountStatus=prop=='parentCount'?order=='ascending'?'0':'1':'';
            this.studentCountStatus=prop=='studentCount'?order=='ascending'?'0':'1':'';
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
    }
</style>                     